<template>
  <div>
  <div>
    <van-nav-bar class="dz-dh"
                 title="能量训练"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
    />
  </div>
  <div>
    <div class="dv1">
      <div class="dv1-1">
        <div @click="tz()">
        <p style="float:left;font-size: 20px;font-weight: bold;margin-left: 30px" >选择一节喜欢的课程</p>
        </div>
      </div>
      <div>
        <img src="../assets/images/yd-hr-06.jpg" class="img1">
      </div>
    </div>
  </div>



  <div style="margin-top: 20px">
    <div class="sy-tj-gd">
      <van-row>
        <van-col span="7" style="font-size: 20px;font-weight: bold;">我的课程</van-col>
        <van-col span="10"></van-col>
        <van-col span="7">
          <van-button round>查看更多</van-button>
        </van-col>
      </van-row>
    </div>
      <div class="sy-tj-hd" v-for="imgs in backImages" :key="imgs">
        <div class="sy-tj-hd-tp">
          <img :src="imgs.imgurl" class="sy-tj-imgs">
        </div>
        <div class="sy-tj-hd-xq">
          <label style="font-size: 18px;font-weight: bold;">{{ imgs.title }}</label>
        </div>
      </div>
      <!--    插图-->
    </div>




    <!--          1.8 商品推荐-->
    <div class="sy-tj-gd">
      <van-row>
        <van-col span="7" style="font-size: 20px;font-weight: bold;">商品推荐</van-col>
        <van-col span="10"></van-col>
        <van-col span="7">
          <van-button round to="/mall">查看更多</van-button>
        </van-col>
      </van-row>
    </div>
    <!--          1.9 商品详情-->
    <div class="sy-sp-xq">
      <div class="sp-lx" v-for="s in shop" :key="s">
        <img class="mal-gd-imgs" :src="s.img">
        <div>
          <label class="sp-tp-na">{{ s.name }}</label><br>
          <span style="color: #ee0a24;font-size: 9px">商品价格:{{ s.discount }}</span>
          <span
              style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px;font-size: 9px">{{
              s.price
            }}</span><br>
          <span
              style="color: orangered;font-size: 10px;margin-right: 40px;margin-top: 10px">商品销量:{{
              s.sale
            }}</span>
          <span style="color: #ee0a24">￥{{ s.discount }}</span>
          <span style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px">￥{{ s.price }}</span><br>
          <span style="color: orangered;font-size: 10px;margin-right: 40px">商品销量:{{ s.sale }}</span>
          <span style="color: lightslategrey;font-size: 10px">库存:{{ s.room }}</span>
        </div>
      </div>
    </div>
    <div class="sy-button"></div>
  </div>
</template>

<script>
export default {
  name: "TrainView",
  data() {
    return {
      backImages: [
        {
          title:"",
          imgurl:"",
        }
      ],
      //商品信息
      shop:
          [
            {
              img: "",
              name: "",
              price: "",
              discount: "",
              sale: "",
              room: ""
            }],
      time: 6,
      msg: "未完成",
      num1: "20"

    }
},mounted() {
    this.axios.get("/api/mall/mall.do?id=" + 4).then(r => {
      if (r.data.code == 200) {
        //console.log(r.data.data)
        this.shop = r.data.data;
      } else {
        this.$toast(r.data.msg);
      }
    }),
        this.axios.get("/api/plan/all.do").then(r=>{
          if (r.data.code==200){
            this.backImages=r.data.data;
          }else {
            this.$toast(r.data.msg);
          }
        })
  },
  methods:{
    onClickLeft() {
      history.back();
    },
    tz(){
      this.$router.push("/Plan");
    },
  }
}
</script>

<style scoped>


.dv1 {
  width: 100%;
  height: 120px;
  float: left;
  background-color: #FFFFFF;
}

.dv1-1 {
  width: 60%;
  margin-top: 30px;
  float: left;
}


.img1 {
  width: 40%;
  height: 150px;
}

.dv2 {
  width: 100%;
  height: 70px;
  float: left;
  margin-top: 20px;
  background-color: #FFFFFF;
}

.dv2-1 {
  width: 20%;
  height: 70px;
  float: left;

}

.dv2-2 {
  width: 80%;
  height: 70px;
  float: left;
  margin-top: 10px;
}


.dz-dh {
  margin-top: 20px;
}
.dz-dh {
  margin-top: 20px;
}

.sy-tj-gd {
  width: 100%;
  float: left;
  margin-top: 15px;
}

.sy-button {
  width: 100%;
  float: left;
  margin-bottom: 10%;
}

.sp-lx {
  width: 40%;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5%;
  margin-left: 5%;
  float: left;
}

.sp-tp-na {
  font-size: 12px;
  font-weight: bold;
}

.mal-gd-imgs {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.sy-sp-xq {
  width: 100%;
  float: left;

}

.sy-tj-imgs {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  float: left;
}

.sy-tj-hd {
  width: 92%;
  margin-left: 4%;
  margin-right: 4%;
  float: left;
  height: 140px;
}

.sy-tj-hd-tp {
  margin-top: 10px;
  width: 50%;
  height: 120px;
  float: left;
}

.sy-tj-hd-xq {
  margin-top: 10px;
  margin-left: 4%;
  width: 46%;
  height: 100px;
  float: left;
}
</style>
